<!DOCTYPE html>
<html>
<head>
<include file="Public:base"/>

<script src="__PUBLIC__/js/bootstrap-carousel.js"></script>
<script src="__PUBLIC__/js/lazyload.js"></script>

<script type="text/javascript">


$(document).ready(function() {
	$(".lazy").lazyload({
		effect : "fadeIn",
		container: $("#slide")
	});
	
	
});


</script>

</head>
<body>
<include file="Public:header"/>


<section id="main" class="cc">
  <div id="slide" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
   <volist name="players" id='vo' key="k">
  	<if condition=" ($k-1) == 0 ">
  	<li data-target="#slide" data-slide-to="{$k-1}" class="active">
      <img src="__ROOT__{$vo.img}" alt="{$vo.title}">
    </li>
	<else />
	<li data-target="#slide" data-slide-to="{$k-1}">
      <img class="lazy" data-original="__ROOT__{$vo.img}" alt="{$vo.title}">
    </li>
 	</if>
   </volist>
  
    
    
  </ol>

  <div class="carousel-inner">
  <volist name="players" id='vo' key="k"> 
    <if condition=" $k == 1 ">
  	<div class="item active">
      <img src="__ROOT__{$vo.img}" alt="{$vo.title}">
    </div>
	<else />
	<div class="item">
      <img class="lazy" data-original="__ROOT__{$vo.img}" alt="{$vo.title}">
    </div>
 	</if>
  </volist>
    
  </div>

  <a class="left carousel-control" href="#slide" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#slide" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  <div class="bg-opacity"></div>
</div>
</section>

<include file="Public:footer"/>
</body>
</html>